<template>
  <div class="game-content">
    <com-header></com-header>
    <div class="centerbox">
      <div class="pro-box">
        <div class="pro isacitve">
          <div class="box img-long">
            <div class="content">
              <div
                v-for="(item, index) in longData"
                @click="handleBall(item)"
                :class="{
                  longbg_big: fkLongOrHu.id === item.id,
                  longbg_small: fkLongOrHu.id !== item.id,
                }"
                :key="index"
              >
                <span>{{ item.label }}</span>
                <span>{{ item.odds }}{{$t('bei')}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="pro isacitve">
          <div class="box img-hu">
            <div class="content">
              <div
                v-for="(item, index) in huData"
                @click="handleBall(item)"
                :class="{
                  hubg_big: fkLongOrHu.id === item.id,
                  hubg_small: fkLongOrHu.id !== item.id,
                }"
                :key="index"
              >
                <span>{{ item.label }}</span>
                <span>{{ item.odds }}{{$t('bei')}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="mid" @click="handleHe()">
          <span>{{$t("he")}}</span>
          <span>{{ heData.odds }}{{$t('bei')}}</span>
        </div>
      </div>
      <com-money class="money-posi"></com-money>
      <com-btn class="btn-posi"></com-btn>
    </div>
  </div>
</template>

<script>
import ComMoney from "./Com/ComMoney.vue";
import ComHeader from "./Com/ComHeader.vue";
import ComBtn from "./Com/ComBtn.vue";
import { mapState } from "vuex";
export default {
  name: "GameFklh",
  //游戏疯狂龙湖
  props: {},
  components: {
    ComMoney,
    ComHeader,
    ComBtn
  },
  computed: {
    ...mapState("handlegame", ["gameInfo", "fkLongOrHu"]),
    ...mapState("handlegame", ["isInit"])
  },
  data() {
    return {
      longLabel: ["龙", "双龙", "三龙", "四龙"],
      huLabel: ["虎", "双虎", "三虎", "四虎"],
      ball: [
        {
          item: 1
        },
        {
          item: 2
        },
        {
          item: 3
        }
      ],
      selected: "long",
      longData: "",
      huData: "",
      heData: ""
    };
  },
  created() {
    var ruleID = this.gameInfo.gameRoomConfig.ruleList;
    this.longData = ruleID.slice(0, 4);
    this.longLabel.forEach((label, index) => {
      this.longData[index].label = label;
    });
    this.huData = ruleID.slice(4, 8);
    this.huLabel.forEach((label, index) => {
      this.huData[index].label = label;
    });
    this.heData = ruleID[8];
    console.log(this.huData);
    console.log(this.longData);
    console.log(this.heData);
  },
  watch: {
    isInit: {
      handler(newVal) {
        if (newVal) {
          this.init();
          this.$store.commit("handlegame/INTE_PAGE_STATE", false);
        }
        // 执行你想要的操作
      },
      deep: true // 如果isInit是对象或数组，使用deep选项进行深度监听
    }
  },
  methods: {
    init() {
      this.selected = "long";
    },
    checkSelected(value) {
      this.selected = value;
    },
    handleBall(item) {
      this.$store.dispatch("handlegame/set9LongHu", item);
    },
    handleHe() {
      this.$store.dispatch("handlegame/set9LongHu", this.heData);
    }
  }
};
</script>
<style lang="less" scoped>
.game-content {
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
}
.por-posi {
  margin-top: 20px;
}

.pro-box {
  margin-top: 12px;
  position: relative;
  width: 321px;
  height: 134px;
  display: flex;
  justify-content: space-between;
  .pro {
    width: 149px;
    height: 134px;
    box-sizing: border-box;
    padding: 2px;
    border-radius: 12px 12px 12px 12px;

    .box {
      width: 100%;
      height: 100%;
      border-radius: 12px 12px 12px 12px;
      background-size: 100% 100%;
      padding: 15px;
      box-sizing: border-box;
      font-size: 12px;
      font-weight: 400;

      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }
    .img-long {
      background-image: url(@/assets/images/payOrder/long.png);
      color: #b8c8ff;
    }
    .img-hu {
      color: #ffd486;
      background-image: url(@/assets/images/payOrder/hu.png);
    }
    .content {
      div {
        width: 56px;
        height: 56px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-position: center center;
      }
      .longbg_small {
        background-image: url(@/assets/images/payOrder/long-bg-small.png);
        background-size: 46px 46px;
        background-repeat: no-repeat;
      }
      .longbg_big {
        background-image: url(@/assets/images/payOrder/long-bg.png);
        background-size: 56px 56px;
        background-repeat: no-repeat;
      }
      .hubg_small {
        background-image: url(@/assets/images/payOrder/hu-bg-small.png);
        background-size: 46px 46px;
        background-repeat: no-repeat;
      }
      .hubg_big {
        background-image: url(@/assets/images/payOrder/hu-bg.png);
        background-size: 56px 56px;
        background-repeat: no-repeat;
      }
      display: grid;
      font-size: 12px;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 10px;
      align-items: center;
      justify-content: center;
    }
  }
  .mid {
    width: 60px;
    height: 60px;
    display: flex;
    flex-direction: column;
    background-image: url(@/assets/images/payOrder/mid.png);
    background-size: 60px 60px;
    background-repeat: no-repeat;
    position: absolute;
    align-items: center;
    justify-content: center;
    top: 50%; /* 元素顶部位于父容器的中间位置 */
    left: 50%; /* 元素左侧位于父容器的中间位置 */
    transform: translate(
      -50%,
      -50%
    ); /* 使用transform将元素向上/向左移动自身宽高的一半，实现居中 */
    span:nth-child(1) {
      font-size: 26px;
      font-weight: bold;
      line-height: 23px;
      color: #7b5110;
    }
    span:nth-child(2) {
      font-size: 12px;
      font-weight: 400;
      color: #7b5110;
    }
  }
}
.active {
  background-image: -webkit-linear-gradient(
    top,
    rgba(254, 247, 179, 1) 0%,
    rgba(227, 139, 28, 1) 30%,
    rgba(253, 243, 176, 1) 60%
  );
  background-image: -moz-linear-gradient(
    top,
    rgba(254, 247, 179, 1) 0%,
    rgba(227, 139, 28, 1) 30%,
    rgba(253, 243, 176, 1) 60%
  );
  background-image: linear-gradient(
      top,
      rgba(254, 247, 179, 1) 0%,
      rgba(227, 139, 28, 1) 30%,
      rgba(253, 243, 176, 1) 60%
    )
    1 1;
}
.isacitve {
  padding: 1px;
  background-image: -webkit-linear-gradient(
    top,
    rgb(131, 122, 109) 0%,
    rgb(131, 122, 109) 30%,
    rgb(131, 122, 109) 60%
  );
  background-image: -moz-linear-gradient(
    top,
    rgb(131, 122, 109) 0%,
    rgb(131, 122, 109) 30%,
    rgb(131, 122, 109) 60%
  );
  background-image: linear-gradient(
      top,
      rgb(131, 122, 109) 0%,
      rgb(131, 122, 109) 30%,
      rgb(131, 122, 109) 60%
    )
    1 1;
}
.ball-select::-webkit-scrollbar {
  display: none; /* Webkit 兼容性：隐藏滚动条 */
}
.ballsize {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
.ballbox {
  margin-top: 14px;
  display: flex;
}
.centerbox {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .money-posi {
    margin-top: 25px;
  }
  .btn-posi {
    margin-top: 19px;
  }
}
</style>
